<template>
	<view class="myOrder">
		<view class="day paddingTop10 disFlex">
			<view @tap="changeIndex(index,val.type)" :class="activeIndex == index?'activeColor':''" v-for="(val,index) in dayList "
			 :key="index">{{val.name}}</view>
		</view>
		<view class="">
			<view class="maxBox" v-if="list.length>0">
				<view class="box10" v-for="(val,index) in list" :key="index" @tap="go(val.id)">
					<view class="orderList  scale-1px-bottom">
						<view class="disFlex">
							<view class="time">{{val.create_time}}</view>
							<view class="status">{{val.status}}</view>
						</view>
						<!-- <view class="goodsInfo" v-for="(item,i) in val.goodsinfo" :key = "i" @tap="getnav(router(`curriculumDetail?goodsid=${item.goods_id}`))"> -->
						<view class="goodsInfo">
							<image :src="val.project.cover" mode=""></image>
							<view class="box">
								<view class="name line2">{{val.project.title}}</view>
								<view class="content line3">
									{{val.project.desc}}
								</view>
							</view>
						</view>
						<view class="shopInfo disFlex">
							<view>
								<text class="word">项目总金额</text>
								<text class="price">{{val.project.cost}}</text>
							</view>
							<view>
								<text class="word">方案签约定金</text>
								<text class="price">{{val.project.deposit}}</text>
							</view>
						</view>
					</view>

				</view>
				<!-- <uni-load-more :loadingType="loadingType" ></uni-load-more> -->
			</view>
			<view class="" style="text-align: center;margin-top: 20%;height: 100vh;color: #CCCCCC;" v-else>
				暂无数据~
			</view>
		</view>
	</view>
</template>

<script>
	var i = '';
	var app = getApp().globalData;
	export default {
		data() {
			return {
				dayList: [{
					type: 0,
					name: '待签约'
				}, {
					type: 1,
					name: '已签约'
				}, {
					type: 2,
					name: '待施工'
				}, {
					type: 3,
					name: '待验收'
				}, {
					type: 4,
					name: '已完成'
				}],
				activeIndex: 0,
				censelPopStatus: false,
				page: 1,
				list: [],
				loadingType: 0,
				ordernumber: ''
			}
		},
		onLoad(option) {
			// this.activeIndex = option.type;
			console.log(option)
			this.changeIndex(option.type, option.type)
		},
		onShow() {
			// if (app.is_orderCrt && this.activeIndex != 4) {
			// 	this.loadingType = 0;
			// 	this.list = [];
			// 	this.page = 1;
			// 	this.queryOrder();
			// }else if (app.is_orderCrt && this.activeIndex == 4) {
			// 	this.loadingType = 0;
			// 	this.list = [];
			// 	this.page = 1;
			// 	this.queryShouHou();
			// }
		},
		methods: {
			go(id) {
				if (this.activeIndex == 0) {
					this.getnav(this.router(`waitSignUp?id=${id}`));
				} else if (this.activeIndex == 1) {
					this.getnav(this.router(`alreadySignUp?id=${id}`));
				} else if (this.activeIndex == 2) {
					this.getnav(this.router(`waitConstruction?id=${id}`));
				} else if (this.activeIndex == 3) {
					this.getnav(this.router(`waitCheck?id=${id}`));
				} else if (this.activeIndex == 4) {
					this.getnav(this.router(`alreadySuccess?id=${id}`));
				}
			},
			changeIndex(index, type) {
				this.activeIndex = index;
				this.list = []
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				let typedata = {
					token,
					user_id,
					type
				}
				this.http('/api/project_order/index', 'post', typedata, )
					.then((res) => {
						if (res.sta == 200) {
							res.data.data.forEach((v) => {
								let data = {
									token,
									user_id,
									id: v.id
								}
								this.http('/api/project_order/read', 'post', data, )
									.then((res) => {
										if (res.sta == 200) {
											if (res.data.status == 0) {
												res.data.status = '待签约';
											} else if (res.data.status == 1) {
												res.data.status = '已签约';
											} else if (res.data.status == 2) {
												res.data.status = '待施工';
											} else if (res.data.status == 3) {
												res.data.status = '待验收';
											} else if (res.data.status == 4) {
												res.data.status = '已完成';
											}
										}
										this.list.push(res.data)
									})

							})

						}

					})


			},
			// queryOrder () {
			// 	let data = {
			// 		page:this.page,
			// 		filter: this.activeIndex
			// 	};
			// 	this.http('apicloud/MemberOrder/index','post',data).then( res => {
			// 		if (res.status == 200) {
			// 			if (res.data.length == 0) {
			// 				this.loadingType = 2;
			// 				return
			// 			};
			// 			this.loadingType = 0;
			// 			this.list = [...this.list,...res.data];
			// 		}
			// 	})
			// },
			// queryShouHou () {
			// 	let data = {
			// 		page:this.page,
			// 		filter: this.activeIndex
			// 	};
			// 	this.http('apicloud/ThApply/get_service_list','post',data).then( res => {
			// 		if (res.status == 200) {
			// 			if (res.data.service_list.length == 0) {
			// 				this.loadingType = 2;
			// 				return
			// 			};
			// 			this.loadingType = 0;
			// 			this.list = [...this.list,...res.data.service_list];
			// 		}
			// 	})
			// },
			// deleteOrder (val,index) {
			// 	let data = {
			// 		order_num:val.ordernumber
			// 	};
			// 	uni.showLoading({
			// 		mask:true
			// 	});
			// 	this.http('apicloud/MemberOrder/delorder','post',data).then(res => {
			// 		if (res.status == 200) {
			// 			this.list.splice(index,1);
			// 			uni.showToast({
			// 				title:res.mess,
			// 				icon:'none'
			// 			})
			// 		}else{
			// 			uni.hideLoading();
			// 		}
			// 	})
			// },


			// showCenselPop (val,index) {
			// 	this.ordernumber = val.ordernumber;
			// 	i = index;
			// 	this.censelPopStatus = true;
			// },
			// closeCenselPop () {
			// 	this.censelPopStatus = false;
			// },
			// censelPop () {
			// 	let data = {
			// 		order_num:this.ordernumber
			// 	};
			// 	uni.showLoading({
			// 		mask:true
			// 	});
			// 	this.disabled = true;
			// 	this.http('apicloud/MemberOrder/quxiao','post',data).then(res => {
			// 		if (res.status == 200) {
			// 			this.disabled = false;
			// 			this.censelPopStatus = false;
			// 			uni.hideLoading();
			// 			this.list.splice(i,1);
			// 		}else{
			// 			this.disabled = false;
			// 			uni.showToast({
			// 				title:res.mess,
			// 				icon:'none'
			// 			})
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F9;
	}

	.myOrder {

		background-color: #FFFFFF;
		.day {
			padding: 0 40rpx;

			view {
				font-size: 30rpx;
				// color:rgba(153,153,153,1);
			}

			.activeColor {
				color: #2291FF;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: -24rpx;
					z-index: 1;
					width: 100%;
					height: 8rpx;
					border-radius: 4px;
					background-color: #2291FF;
				}
			}
		}

		.maxBox {
			padding-top: 32rpx;

			.orderList {
				padding: 40rpx;

				.time {
					color: #BDC9D7;
				}

				.status {
					color: #2291FF;
				}

				.goodsInfo {
					margin: 40rpx 0;
					display: flex;
					align-items: center;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}

					.box {
						padding-left: 30rpx;
						height: 180rpx;
						flex: 1;
						display: flex;
						flex-direction: column;

						.name {
							color: #333;
							font-size: 32rpx;
							font-weight: bold;
						}

						.content {
							color: #BDC9D7;
							font-size: 24rpx;
							padding-top: 30rpx;
						}
					}
				}

				.shopInfo {
					margin-top: 50rpx;

					.price {
						color: #FD7103;
						font-size: 32rpx;
						font-weight: bold;

						&::before {
							padding-right: 5rpx;
						}
					}

					.word {
						color: #BDC9D7;
						padding-left: 6rpx;
						font-size: 20rpx;
					}
				}
			}
		}

		.canselBox {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 999;

			.cBox {
				height: 300rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
				border-radius: 10px;
				position: absolute;
				left: 40rpx;
				width: calc(100% - 80rpx);
				z-index: 9999;
				top: 50%;
				transform: translateY(-50%);

				.title {
					height: 200rpx;
					text-align: center;
					line-height: 200rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				.crt {
					display: flex;
					align-items: center;
					height: 100rpx;
					border-top: 1px solid #eee;

					>button {
						font-size: 36rpx;
						flex: 1;
						text-align: center;
						line-height: 100rpx;
						outline: none;
						border: none;
						border-radius: 0;

						&:first-child {
							border-right: 1px solid #eee;
						}

						&:last-child {
							color: #6894B9;
						}
					}
				}
			}
		}
	}
</style>
